import * as React from 'react';
import { connect } from 'react-redux';
import { InputNumber, Row, Col, Slider, Spin } from 'antd';
import { get } from 'lodash';
import { mapTestStateToProps, mapTestDispatchToProps } from './common/connectProps';
import './Test.scss';

interface TestProps {
  // connected dispatch props
  updateTest: (obj: any) => any;
  removeTest: () => any;
  fetchTestDetail: () => any;

  // connected state props
  testProfile: any;

  // own props
  testId: number;
  children: any;
}
interface TestState {}

class Test extends React.Component<TestProps, TestState> {
  static defaultProps: TestProps = {
    updateTest: () => {},
    removeTest: () => {},
    fetchTestDetail: () => {},

    testProfile: {},

    testId: 0,
    children: null,
  };
  constructor(props: TestProps) {
    super(props);
  }

  testDidChange(props: any) {
    const { fetchTestDetail } = props;

    fetchTestDetail();
  }

  handleUpdateKnowledge = (knowledgeId: number) => {
    const { updateTest, fetchTestDetail, testProfile } = this.props;

    let { content } = testProfile;
    content = { ...content, knowledgeId };

    updateTest({ content }).then(fetchTestDetail);
  };

  componentDidMount() {
    this.testDidChange(this.props);
  }

  componentWillReceiveProps(nextProps: any) {
    const { testId } = nextProps;
    const { testId: oldTestId } = this.props;

    if (testId !== oldTestId) {
      this.testDidChange(nextProps);
    }
  }

  getExtraProps() {
    return {};
  }

  render() {
    const { children, ...testProps } = this.props;

    let outlet =
      children instanceof Function ? children(testProps, this.getExtraProps()) : children;

    const isLoading = false;

    return (
      <div className="test-parser-option-item text-left">
        <Spin spinning={isLoading}>
          <div className="text-center">{outlet}</div>
        </Spin>
      </div>
    );
  }
}

export default connect(
  mapTestStateToProps,
  mapTestDispatchToProps
)(Test);
